<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-button icon="el-icon-plus" type="primary" size="small" @click="handleClickAddTo">添加广告</el-button>
    </el-row>
    <el-row>
      <el-table size='small' :data="adv_data" :header-cell-style="{background:'#f2f2f2'}" class="mt20">
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.logo" alt="图片加载失败">
          </template>
        </el-table-column>
        <el-table-column align="center" label="类型" prop="type"></el-table-column>
        <el-table-column align="center" label="描述" prop="describe"></el-table-column>
        <el-table-column align="center" label="广告链接" prop="link"></el-table-column>
        <el-table-column align="center" label="开始时间" prop="start_time"></el-table-column>
        <el-table-column align="center" label="结束时间" prop="stop_time"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="created_at"></el-table-column>
        <el-table-column align="center" label="更新时间" prop="updated_at"></el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <span :class="scope.row.status === 1 ? 'succ' : scope.row.status === 4 ? 'err' :''">{{ scope.row.status === 1 ? '启用中' : scope.row.status === 2 ? '已下线' : scope.row.status === 3 ? '未生效' : scope.row.status === 4 ? '已到期' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button class="warning" type="text" size="small" @click="handleClickEditTo(scope.row.id)">修改</el-button>
            <el-button class="err" type="text" size="small" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="page.total" layout="total, prev, pager, next, jumper"  class="fr mt20" @current-change="handleCurrentChange" :page-size="page.pageSize"></el-pagination>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { mapGetters } from 'vuex'
import { advertInit, nextPage, del } from '@/api/advert'

export default {
  name: 'payAdvertsing',
  components: {
    Breadcrumb
  },
  data() {
    return {
      adv_data: [],
      page: {
        total: 0,
        pageSize: 1
      }
    }
  },
  methods: {
    handleClickEditTo(id) {
      this.$router.push({ name: 'AdvertsingList', query: { id: id }})
    },
    handleClickAddTo(id) {
      this.$router.push({ name: 'AdvertsingList' })
    },
    handleCurrentChange(v) {
      nextPage(this.id, v).then(response => {
        this.adv_data = response.data.result.data
        this.page.total = response.data.result.total
      })
    },
    del(id) {
      const model = confirm('是否删除该广告？')
      if (model) {
        del(id).then(response => {
          if (response.data.errorCode === 0) {
            this.$message.success(response.data.errorMsg)
            this.adv_data = response.data.result.data
            this.page.total = response.data.result.total
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
      }
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  mounted() {
    advertInit(this.id).then(response => {
      this.adv_data = response.data.result.data
      this.page.total = response.data.result.total
      this.page.pageSize = response.data.result.per_page
    })
  }
}
</script>

<style lang="scss" scoped>
  .el-row{
    .el-table{
      img{
        width: 100px;
        height: 100px;
      }
    }
  }
</style>
